<template>
  <div id="ehart1" ref="ehart1" :style="{width: '100%', height: '300px'}"></div>
</template>
<script>
export default {
  data() {
    return {
      dataX: [],
      dataY: []
    };
  },
  created() {
    this.getList().then(res => {
      this.drawLine(res);
    });
  },
  methods: {
    drawLine(data) {
      let myChart = this.$Echarts.init(document.getElementById("ehart1"));
      let option = {
        title: {
          text: "水位日报表（单位:CM）"
        },
        tooltip: {
          trigger: "item",
          // trigger: "axis",
          position: "bottom",
          textStyle: {
            align: "left"
          },
          formatter: function(params) {
            console.log(params);
            var res = "<div><p>水位站：" + params.seriesName + "</p></div>";
            // for(var i=0;i<params.length;i++){
            // res+='<p>'+params[i].seriesName+':'+params[i].data+'</p>'
            // }
            return res;

            // seriesType: "line"
            // seriesIndex: 0
            // seriesId: "广利河西五路0"
            // seriesName: "广利河西五路"
            // name: 5
            // dataIndex: 5
            // data: 630
            // dataType: undefined
            // value: 630
            // color: "#c23531"
            // borderColor: undefined
            // console.log(params.seriesName)
          }
        },
        legend: {
          x: "300px",
          y: "-5px",
          data: [
            "广利河西五路",
            "广利河北二路",
            "广利河黄河路",
            "东营河庐山路",
            "五六干合排西五路",
            "五六干合排西四路",
            "六干排西四路",
            "六干排庐山路",
            "老广蒲沟西五路",
            "老广蒲沟西二路",
            "老广蒲沟南一路",
            "五干排西五路",
            "五干排西二路",
            "五干排南二路"
          ],
          selected: {
            广利河北二路: false,
            广利河黄河路: false,
            东营河庐山路: false,
            五六干合排西五路: false,
            五六干合排西四路: false,
            六干排西四路: false,
            六干排庐山路: false,
            老广蒲沟西五路: false,
            老广蒲沟西二路: false,
            老广蒲沟南一路: false,
            五干排西五路: false,
            五干排西二路: false,
            五干排南二路: false
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        //保持图片
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            // "8时",
            // "9时",
            // "10时",
            // "11时",
            // "12时",
            // "13时",
            // "14时",
            // "15时",
            // "16时",
            // "17时",
            // "18时",
            // "19时",
            // "20时",
            // "21时",
            // "22时",
            // "23时",
            // "0时",
            // "1时",
            // "2时",
            // "3时",
            // "4时",
            // "5时",
            // "6时",
            // "7时"
          ]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            // color: "#999999", // y轴刻度名称颜色
            formatter: function(value) {
              var value;
              if (value >= 1000) {
                value = value / 1000 + "K";
              } else if (value < 1000) {
                value = value;
              }
              return value;
            }
          }
        },
        series: [
          {
            name: "广利河西五路",
            type: "line",
            stack: "总量",
            smooth: true,
            itemStyle: {
              normal: {
                // color: "#4285F4", // 柱状图颜色
                label: {
                  show: false, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "blue",
                    fontSize: 14
                  }
                }
              }
            },
            data: [
              120,
              232,
              301,
              434,
              50,
              630,
              310,
              120,
              223,
              103,
              222,
              123,
              231,
              234,
              210,
              120,
              23,
              13,
              222,
              123,
              231,
              34,
              231,
              234
            ]
          },
          {
            name: "广利河北二路",
            type: "line",
            stack: "总量",
            data: [
              320,
              82,
              191,
              234,
              290,
              330,
              310,
              220,
              182,
              191,
              234,
              290,
              30,
              310,
              290,
              330,
              310,
              220,
              182,
              191,
              22,
              33,
              56,
              999
            ]
          },
          {
            name: "广利河黄河路",
            type: "line",
            stack: "总量",
            data: [
              150,
              32,
              201,
              154,
              190,
              330,
              410,
              66,
              150,
              32,
              201,
              154,
              410,
              66,
              330,
              10,
              66,
              150,
              232,
              201,
              154
            ]
          },
          {
            name: "东营河庐山路",
            type: "line",
            stack: "总量",
            data: [
              20,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              23,
              13,
              222,
              123,
              21,
              234,
              210,
              120,
              23,
              13,
              222,
              123,
              231,
              234,
              231,
              234
            ]
          },
          {
            name: "五六干合排西五路",
            type: "line",

            stack: "总量",
            data: [
              120,
              12,
              101,
              134,
              90,
              230,
              210,
              120,
              23,
              13,
              222,
              123,
              231,
              234,
              20,
              120,
              23,
              13,
              222,
              123,
              231,
              34,
              231,
              234
            ]
          },
          {
            name: "五六干合排西四路",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              20,
              120,
              23,
              13,
              222,
              123,
              231,
              234,
              210,
              120,
              23,
              13,
              222,
              123,
              231,
              234,
              231,
              234
            ]
          },
          {
            name: "六干排西四路",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              10,
              23,
              13,
              222,
              123,
              231,
              234,
              210,
              120,
              23,
              13,
              222,
              123,
              231,
              34,
              231,
              234
            ]
          },
          {
            name: "六干排庐山路",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              188,
              134,
              90,
              230,
              210,
              120,
              23,
              13,
              222,
              123,
              231,
              234,
              210,
              120,
              23,
              13,
              222,
              123,
              231,
              234,
              231,
              234
            ]
          },
          {
            name: "老广蒲沟西五路",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              30,
              210,
              120,
              23,
              13,
              222,
              123,
              231,
              234,
              10,
              120,
              23,
              13,
              222,
              123,
              231,
              234,
              231,
              234
            ]
          },
          {
            name: "老广蒲沟西二路",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              960,
              30,
              210,
              20,
              233,
              153,
              222,
              123,
              231,
              334,
              910,
              120,
              213,
              13,
              222,
              123,
              231,
              234,
              231,
              234
            ]
          },
          {
            name: "老广蒲沟南一路",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              10,
              23,
              13,
              222,
              23,
              21,
              234,
              20,
              120,
              2,
              13,
              22,
              13,
              21,
              24,
              231,
              234
            ]
          },
          {
            name: "五干排西五路",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              23,
              13,
              222,
              123,
              231,
              34,
              10,
              20,
              3,
              13,
              22,
              23,
              31,
              234,
              31,
              234
            ]
          },
          {
            name: "五干排西二路",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              10,
              120,
              23,
              13,
              22,
              123,
              31,
              24,
              21,
              120,
              23,
              13,
              222,
              3,
              231,
              24,
              231,
              24
            ]
          },
          {
            name: "五干排南二路",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              11,
              14,
              90,
              20,
              210,
              10,
              23,
              13,
              222,
              123,
              21,
              234,
              10,
              120,
              23,
              13,
              22,
              123,
              21,
              234,
              31,
              234
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    //获取列表数据
    getList() {
      let _this = this;
      let time = _this.search.time;
      console.log(time);
      return new Promise(function(resolve, reject) {
        _this.$http
          .post("rainDayData/getAllDayData", {
            time,
            companyId: localStorage.getItem("companyId")
          })
          .then(res => {
            _this.data.currpage = 1;
            _this.data.list = res.data;
            // console.log(res.data);
            let dataX = [];
            let dataY = [];
            // res.data.forEach(element => {
            //   dataX.push(element.deviceName);
            //   dataY.push(element.dayTotal);
            // });
            let totalArr = res.data.filter(v => {
              return v.deviceName === "合计量";
            });

            let dataed = Object.values(totalArr[0]).slice(0, 24);
            let dataedStart = dataed.slice(0, 8);
            let dataedEnd = dataed.slice(8, 24);
            let dataList = [...dataedEnd, ...dataedStart];
            // console.log("xxxx1",dataed)
            // console.log("xxxx2",dataedStart)
            // console.log("xxxx3",dataedEnd)
            // console.log("xxxx4",dataList)

            // _this.dataX = dataX;
            _this.dataY = dataList;

            // ;
            resolve(dataList);
          });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  display: flex;
  justify-content: space-between;
}
.tableButton3 {
  color: #fff;
  background-color: #f56c6c;
  border-radius: 3px;
}
.textmsg {
  color: red;
}
.textcc {
  color: #000;
}
.paginationList {
  text-align: center;
  margin-top: 32px;
  padding: 0;
}
.table {
  width: 1128px;
  height: 465px;
  margin-top: 16px;
}
.dialogText {
  .el-input {
    width: 240px;
    height: 32px;
  }
  .selectTop {
    width: 240px;
    height: 32px;
  }
  .selectBot {
    width: 240px;
    height: 32px;
  }
}
.formButon {
  width: 127px;
  height: 40px;
  text-align: center;
}

.pagination {
  text-align: center;
  margin-right: 25px;
  padding-top: 20px;
}
.green {
  color: green;
}
.red {
  color: red;
}
#ehart1 {
  margin-top: 22px;
  width: 886px;
  height: 252px;
}
</style>
